<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">巡检类型</div>
			<div class="flexbox">
				<div class="per_left">
					<div class="pre_list">
						<div class="fr">
							<el-input placeholder="请输入名称查询" v-model="name" @input="getleftlist"></el-input>

							<div class="list_btns list_btn_add" @click="showmbadd=true;ppname='';mbid='';remark=''" v-if="$permissions.indexOf(256)  != -1">
								<img src="@assets/images/addfen.png" alt="">添加
							</div>
						</div>
						<div class="leftlists" v-infinite-scroll="load">
							<div :class="act == index?'per_li act':'per_li'" v-for="item,index in leftlist"
								@click="chose(index)">
								<div class="per_li_l">
									<img src="@assets/images/xmed.png" v-if="act == index" alt="">
									<img src="@assets/images/xm.png" v-else alt="">

									<div class="xmname">{{item.name}}</div>
								</div>
								<div class="perr">
									<img src="@assets/images/xmedit2.png" alt="" v-if="$permissions.indexOf(260)  != -1"
										@click="mbid=item.id;ppname=item.name;remark=item.remark;showmbadd=true">
									<img src="@assets/images/del.png" alt="" @click="mbid=item.id;delmb=true" v-if="$permissions.indexOf(262)  != -1">
								</div>

							</div>
						</div>

					</div>
				</div>
				<div class="xmright">
					<div class="search_box" v-if="$permissions.indexOf(256)  != -1">
						<div class="add_btn sear_btns" style="margin-bottom: 20px;" @click="addshow=true">
							<img src="@assets/images/add.png" alt="">
							添加
						</div>
					</div>
					<div class="table-responsive mt-20">
						
						<table class="table table-hover">
							<tr>
								<!-- <th style="width: 50px;">
									<input type="checkbox" autocomplete="off" @change="changeall" v-model="choseall"
										name="adepart" id="adepart"><label for="adepart"></label>
								</th> -->
								<th>作业内容</th>
								<th>备注</th>
								<th class="tcent"
									v-if="$permissions.indexOf(260)  != -1 || $permissions.indexOf(262)  != -1">操作
								</th>
							</tr>
							<tr v-if="list.length ==0">
								<td colspan="3"><h2 class="tcent">暂时没有数据</h2></td>
							
							</tr>
							
							<tr v-for="item,index in list" v-else>
								<!-- <td style="width: 50px;">
									<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="adepart"
										:id="'adepart'+item.id"><label :for="'adepart'+item.id"></label>
								</td> -->
								<td>{{item.name}}</td>
								<td>{{item.remark}}</td>
								<td class="tcent" style="width: 200px;"
									v-if="$permissions.indexOf(260)  != -1 || $permissions.indexOf(262)  != -1">
									<a href="javascript:;" class="btn-green btns" @click="edit(index)"
										v-if="$permissions.indexOf(260)  != -1">编辑</a>
									<a href="javascript:;" class="btn-gray btns" @click="id=item.id;delshow=true"
										v-if="$permissions.indexOf(262)  != -1">删除</a>

								</td>
							</tr>

						</table>

						<div class="page_box">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
								layout="total, sizes, prev, pager, next, jumper" :total="inglen">
							</el-pagination>
						</div>

					</div>
				</div>
			</div>

		</div>

		<!--新增巡检类型-->
		<div :class="showmbadd?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showmbadd?'display: block;z-index:199;':'z-index:199;'">
			<div class="cent w600" style="justify-content: center;width: 550px !important;height: 363px">
				<div class="modal-dialog" role="document" style="width: 100%;height: 363px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{mbid?'编辑巡检类型':'新建巡检类型'}}
							<div class="right" @click="showmbadd=false;">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 250px;">
							<div class="sublist ty">
								<div class="subli">
									<div class="subli_left" style="width: 100%;justify-content: center;">
										<label class="subl" style="width: 95px;"><em class="red">*</em>巡检类型名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="ppname"
												style="width: 336px;" placeholder="输入巡检类型名称">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left" style="width: 100%;justify-content: center;">
										<label class="subl" style="width: 95px;line-height: 40px;">备注</label>
										<div class="input-cont">
											<textarea placeholder="输入备注" name="" id="" cols="30" rows="10"
												v-model="remark"></textarea>

										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addmb">确定</button>
							<button class="btn btn-info close_eng" @click="showmbadd=false">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 删除巡检类型 -->
		<div class="alzzc" v-if="delmb">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除
					<div class="right" @click="mbid='';delmb=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该巡检类型？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delmodel">确认</div>
					<div class="alert_close" @click="id='';delmb=false">取消</div>
				</div>
			</div>
		</div>
		<!-- 新增巡检作业 -->
		<div :class="addshow?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="addshow?'display: block;z-index:199;':'z-index:199;'">
			<div class="cent w600" style="justify-content: center;width: 550px !important;height: 363px">
				<div class="modal-dialog" role="document" style="width: 100%;height: 363px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{jdinfo.id?'编辑巡检作业':'新增巡检作业'}}
							<div class="right" @click="jdinfo={};addshow=false;">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 250px;">
							<div class="sublist ty">
								<div class="subli">
									<div class="subli_left" style="width: 100%;justify-content: center;">
										<label class="subl" style="width: 95px;"><em class="red">*</em>巡检作业内容</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="jdinfo.name"
												style="width: 336px;" placeholder="输入巡检作业内容">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left" style="width: 100%;justify-content: center;">
										<label class="subl" style="width: 95px;">备注</label>
										<div class="input-cont">
											<textarea placeholder="输入备注" name="" id="" cols="30" rows="10"
												v-model="jdinfo.remark"></textarea>

										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addpeo">确定</button>
							<button class="btn btn-info close_eng"
								@click="jdinfo={};addshow=false">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="alzzc" v-if="delshow">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除巡检作业
					<div class="right" @click="id='';delshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该巡检作业？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delpeo">确认</div>
					<div class="alert_close" @click="id='';delshow=false">取消</div>
				</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">

	export default {
		name: "",
		data() {
			return {
				act: 0,
				page: 1,
				page2: 1,
				types: [],
				jdinfo:{},
				list: [],
				leftlist: [],
				inglen: 0,
				limit: 10,
				info:{},
				name:"",
				ppname:"",
				remark:"",
				mbid:"",
				cuserlist: [],
		
				user_alert: false,
				showmbadd: false,
				alert_show: false,
			
				utype:"",
				id:"",
				
				delrwshow: false,
				showadd: false,
				showloading: false,
				delshow: false,
				showzzc: false,
				delmb: false,
				addshow:false
			}
		},
		components: {},

		mounted() {
			this.getleftlist();
			// this.gettype();
		},

		methods: {
			
			 handleSizeChange(val) {
				this.limit = val
				this.getlist()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getlist()
			},
			load(){
				this.page2++
				this.getleftlist()
			},
			edit(index){
				this.type = 'edit'
			
				this.jdinfo = {
					typeId:this.leftlist[this.act].id,
					name:this.list[index].name,
					remark:this.list[index].remark,
					id:this.list[index].id
				}
				this.addshow = true
			},
		
			addpeo() {
				if (!this.jdinfo.name || this.jdinfo.name.trim() == '') {
					this.$Toast("请填写必填选项");
					return
				}
				
				this.showloading = true
				var that = this
				this.jdinfo.typeId = this.leftlist[this.act].id
				var param = this.jdinfo
				this.$http.post(this.$url + '/xj/type/work/save', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.addshow = false
						that.jdinfo={}
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delrw(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.id
				}
				this.$http.post(this.$url + '/xm/template/stage/rw/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delrwshow = false
						that.id = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delpeo(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.id
				}
				this.$http.post(this.$url + '/xj/type/work/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delshow = false
						that.id = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delmodel(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.mbid
				}
				this.$http.post(this.$url + '/xj/type/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delmb = false
						that.act = 0
						that.mbid = ''
						that.page2 = 1
						that.leftlist = []
						that.getleftlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			addmb() {
				this.showloading = true
				var that = this
				var param = {
					id:this.mbid,
					name:this.ppname,
					remark:this.remark
				}
				this.$http.post(this.$url + '/xj/type/saveOrUpdate', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page2 = 1
						that.leftlist = []
						that.getleftlist()
						that.$forceUpdate()
						that.showloading = false
						that.showmbadd = false
						that.ppname = ''
						that.remark = ''
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			
			// 表单提交
			showData(type) {				
				this.info.rwName = this.info.rwName?this.info.rwName:''
				// this.info.createId  = this.uid
				this.info.completeId = this.info.completeId?this.info.completeId:''
				this.info.agreeIds = this.user_c.length>0?this.user_c.join(','):''
				this.info.rwDescripton = this.info.rwDescripton?this.info.rwDescripton:''
				if(!this.xmStage && !this.info.xmStage){
					this.$Toast("请选择所属阶段");
					return
				}
				if(this.xmStage){
					this.info.xmStage = this.xmStage
				}
				
				// if (this.info.rwName.trim() == '' ||  this.info.completeId == '' ||this.info.agreeIds == ''  ) {
				// 	this.$Toast("请填写必填选项");
				// 	return
				// }
				
				
				this.info.fileIds = this.files3id.length>0?this.files3id.join(','):''
				console.log(this.info)
				
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/template/stage/rw/save', this.$qs.stringify(this.info))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.showadd = false
						that.showloading = false
						that.xmStage = ''
						that.info={}
						that.completeName='';
						that.files3=[];
						that.files3id=[];
						that.user_c=[];
						that.cnames='';
						that.getlist()
						that.$forceUpdate()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			
				 chose(i) {
				 	this.act = i
					this.list = []
				 	this.getlist()
				 },
			getleftlist() {
				this.showloading = true
				var that = this
				var param = {
					name:this.name,
					page:this.page2,
					limit:'25',
					field:'create_date',
					order:'desc'
				}
				this.$http.post(this.$url + '/xj/type/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						// that.leftlist = response.data.data.records
						for (var i = 0; i < response.data.data.records.length; i++) {
							that.leftlist.push(response.data.data.records[i])
						}
						if(that.leftlist.length > 0){
							that.getlist()
						}
						
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			
			getlist() {
				this.showloading = true
				var param ={
						typeId:this.leftlist[this.act].id,
						page:this.page,
						limit:this.limit
					}
				var that = this
				this.$http.post(this.$url + '/xj/type/work/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						that.inglen = response.data.count
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.leftlists {
		overflow-y: auto;
		height: calc(100vh - 185px);
	}

	.fr {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20px;
	}

	.fr /deep/ .el-input__inner {
		height: 34px;
	}

	.rwlist_r {
		display: flex;
	}

	.cur {
		color: #dcdcdc;
		margin-right: 10px;
	}

	.rwlist_l {
		display: flex;
		color: #626262;

		font-size: 14px;
	}

	.list_btn_del2 {
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
	}

	.rwlist {
		/* width: 1342px; */
		height: 52px;
		background: #F5F5F5;
		border-radius: 3px;
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px
	}

	.up {
		margin-left: 9px;
		transition: all .3s;
	}

	.list_btn_edit {

		color: #4286F5;
		background: #EFF4FC;
	}

	.list_btn_add {

		background: #ECF5ED;
		color: #32B16C;
	}

	.list_btn_del {

		color: #555555;
		background: #F2F2F2;
	}

	.list_title_r {
		display: flex;
	}

	.list_btns img {
		width: 14px;
		margin-right: 3px;
	}

	.list_btns {
		width: 63px;
		height: 34px;
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin-left: 9px;
		cursor: pointer;
	}

	.list_title_l strong {
		margin-left: 5px;
	}

	.list_title_l span {
		min-width: 23px;
		padding: 0 5px;
		height: 23px;
		background: #32B16C;
		border-radius: 50%;
		font-size: 17px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #fff;
	}

	.list_title_l {

		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: bolder;
		color: #32B16C;
	}

	.list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.sublia {
		display: flex;

	}

	.smadd_btn {
		background: #00A0E9;
		margin-left: 14px;
	}

	.subli textarea {
		width: 336px;
		height: 100px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		outline: none;
		padding: 10px 10px;
		line-height: 20px;
	}

	/* .subli /deep/ .el-date-editor--date .el-input__inner,
	.subli /deep/ .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 271px !important;
	}
 */
	.subli /deep/ .el-input {
		width: 271px !important;
	}

	.subl {
		width: 88px;
		text-align: right;
		margin-right: 17px;
		/* white-space: nowrap; */
	}

	.subli /deep/ .el-input__prefix,
	.task_r /deep/ .el-input__prefix {
		right: 5px;
		left: auto;
		width: 25px;
	}

	.subli input,
	.subli .el-select {
		width: 271px;
		margin-left: 0;
	}

	.subli /deep/ .el-input__inner {
		height: 34px;
	}

	.subli label {
		margin-bottom: 0;
	}

	.sublist {
		padding-top: 15px;
	}

	.subli_left {
		display: flex;
		align-items: center;
		width: 50%;
	}

	.ty .subli_left {
		line-height: 34px;
		align-items: flex-start;
		width: 100%;
	}

	.subli {
		display: flex;
		align-items: center;
		color: #000;
		margin-bottom: 15px;
		justify-content: space-between;
	}

	.sel .el-radio {
		margin-bottom: 0;
		display: flex;
		align-items: center;
	}

	.alert_info /deep/ .el-radio__label {
		font-size: 16px;
		color: #333;
	}

	.line .el-select /deep/ .el-input__inner {
		width: 230px;
	}

	.line /deep/ .el-select {
		margin-right: 20px;
	}

	textarea {
		padding: 0 10px;
		outline: none;
	}

	.line textarea {
		border: 1px solid #ccc;
	}

	.xmright {
		background: #fff;
		width: 100%;
		/* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); */
		padding: 10px 20px;
		margin-top: 5px;
	}

	.xmname {
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.act .per_cur,
	.act .per_li_r {
		background-color: #4286F5;
	}

	.act .per_li_l {
		color: #4286F5;
	}

	.per_li_l img {
		margin-right: 14px;
	}

	.act {
		background-color: #f0f4fd;
	}

	.per_li_r {
		width: 17px;
		height: 4px;
		border-radius: 4px;
		background: #ccc;
	}

	.perr img {
		width: 12px;
		margin-left: 10px;
	}

	.perr {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.per_li {
		padding: 0 26px;
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #000000;
		cursor: pointer;
	}

	.per_li_l {
		display: flex;
		width: 70%;
		align-items: center;
	}



	.per_title img {
		width: 17px;
	}

	.per_title_left img {
		width: 3px;
		margin-right: 8px;
	}

	.per_title_left {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #000000;
	}

	.per_title {
		width: 100%;
		height: 45px;
		background: #FFFFFF;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
	}

	.per_left {
		min-width: 227px;
		max-width: 250px;
		/* background: #f8f8f8; */
		height: calc(100vh - 132px);
		/* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); */
		border-right: 1px solid #eee;

		margin-top: 20px;
	}

	.flexbox {
		display: flex;
		align-items: stretch;

	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
		cursor: pointer;
	}

	.w600 .modal-body.h100 {
		height: 170px;
		overflow: visible;
	}

	.line textarea {
		height: 75px;
	}

	/* 
	.line select {
		width: 200px;
	}
 */
	/* .line input, */
	.line textarea {
		width: 360px;
		color: #000;
	}

	.line_title span {
		color: #E65100;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
		width: 54px;
		text-align: right;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 165px) auto;
	}

	.tcent {
		text-align: center;
	}


	.search_inp {
		width: 255px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}



	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}

	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}

	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		overflow: visible;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
